<template>
  <div class="secondpageContent">
    <!-- 默认图文样式 -->
    <section v-show="!datas.imageList || !datas.imageList[0]" class="defaultcommodity">
      <div
        v-for="index in 4"
        :key="index"
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
        ]"
        :style="{ 'border-radius': datas.borderRadius + 'px' }">
        <!-- 图片 -->
        <div class="imgss" :class="[datas.positions === 'top' ? 'containoptions' : '']">
          <img draggable="false" src="../../../../assets/images/imgs.png" alt="" />
        </div>
        <!-- 文字内容 -->
        <div class="text" :class="[datas.positions === 'top' ? 'positionsTop' : '']">
          <!-- 名称 -->
          <p>这里显示名称，最多显示2行</p>
          <!-- 描述 -->
          <span>这里显示描述</span>
        </div>
      </div>
    </section>

    <!-- 图文样式 -->
    <section v-show="datas.imageList && datas.imageList[0]" class="defaultcommodity">
      <div
        v-for="(item, index) in datas.imageList"
        :key="index"
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
        ]"
        :style="{ 'border-radius': datas.borderRadius + 'px' }">
        <!-- 图片 -->
        <div class="imgss" :class="[datas.positions === 'top' ? 'containoptions' : '']">
          <img v-if="!item.src" src="../../../../assets/images/imgs.png" />
          <img v-else draggable="false" :src="item.src" alt="" />
        </div>
        <!-- 文字内容 -->
        <div class="text" :class="[datas.positions === 'top' ? 'positionsTop' : '']">
          <!-- 名称 -->
          <p>{{ item.name }}</p>
          <!-- 描述 -->
          <span>{{ item.desc }}</span>
        </div>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name: "secondpageContent",
  props: {
    datas: Object,
  },
  data() {
    return {
      active: 0,
    };
  },
  created() {},
  methods: {
    onTextClick() {
      // TODO: 用 data 监听props
      console.log("onTextClick------", this.datas);
      // this.datas.commodityType = 5;
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss" scoped>
.secondpageContent {
  overflow:hidden;
  /* 默认图文 */
  .defaultcommodity {
    box-sizing: border-box;
    margin: 1px;
    padding: 0 15px;
    height: 342px;
    /* 列表 */
    .defaultcommodityList {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      /* 一列一个 */
      &.defaultcommodityList0 {
        width: 100%;
        height: 339px;
        position: relative;
        .imgss {
          height: 364px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        /* 文字 */
        .text {
          position: absolute;
          top: 35px;
          left: 0;
          right: 0;
          text-align: center;
          p {
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            color: #260C70;
          }
          span {
            font-size: 12px;
            color: #260C70;
          }
        }
      }

      /* 一列两个 */
      &.defaultcommodityList1 {
        width: 100%;
        height: 165px;
        margin-bottom:10px;
        position: relative;
        .imgss {
          height: 173px;
          img {
            width:100%;
            height:100%;
          }
        }
        /* 文字 */
        .text {
          position: absolute;
          top: 35px;
          left: 15px;
          p {
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            color: #260C70;
          }
          span {
            font-size: 12px;
            color: #260C70;
          }
        }
      }
    }
  }
}
</style>
